<template>
    <div>
        <div class="tab">
            <b>分类</b>
            <el-tabs v-model="activeName" type="card" @tab-click="change">
                <el-tab-pane
                    v-for="item in list"
                    :key="item.category_id"
                    :name="String(item.category_id)"
                    :label="item.category_name"
                ></el-tab-pane>
            </el-tabs>
        </div>
        <div class="main">
            <div class="shop">
                <el-row :gutter="10">
                    <el-col
                        :span="5"
                        v-for="(item, index) in shop"
                        :key="index"
                    >
                        <div class="grid-content">
                            <el-image
                                lazy-load
                                :src="
                                    'http://47.115.85.237:3000/' +
                                        item.product_picture
                                "
                            />
                            <p>{{ item.product_name }}</p>
                            <p>{{ item.product_title }}</p>
                            <p>
                                <span>￥{{ item.product_selling_price }}</span>
                                <s>￥{{ item.product_price }}</s>
                            </p>
                            <p>
                                <el-button
                                    type="warning"
                                    plain
                                    @click="add(item)"
                                    >添加收藏</el-button
                                >
                            </p>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
import {Toast} from 'vant';
import { getList, getShop } from "../../untils/api/index";
export default {
    data() {
        return {
            list: [],
            shop: [],
            activeName: "",
        };
    },
    created() {
        getList().then((res) => {
            this.list = res.data.category;
        });
        this.change();
    },
    methods: {
        // 点击tab时切换商品类型
        change(tab, event) {
            getShop().then((res) => {
                this.shop = [];
                console.log(res.data.Product);
                this.shop = res.data.Product.filter((item) => {
                    return item.category_id == tab.name;
                });
            });
        },
        // 添加购物车
        add(item) {
            if (localStorage.getItem("token")) {
                this.$store.commit("add", item);
                // commit 调用方法 向state中的shoplist传递参数item
            }else{
                Toast('你还未登录 不能添加商品 请先登录！')
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.tab {
    width: 100%;
    display: flex;
    height: 45px;
    line-height: 45px;
}
.el-tabs {
    margin-left: 20px;
}
.main {
    .shop {
        width: 1400px;
        background-color: #f5f5f5;
        margin: 20px auto;
        .el-row {
            width: 100%;
        }
        .el-col:hover {
            transition: all 1s;
            box-shadow: 5px 5px 5px #888888;
            transform: scale(1.02);
        }
        .el-col {
            background-color: #fff;
            height: 415px;
            width: 270px;
            margin-bottom: 10px;
            margin-left: 10px;
            .el-button {
                margin-left: 65px;
            }
            .el-image {
                width: 100%;
            }
            p {
                font-size: 14px;
                margin: 0;
                padding: 5px;
            }
            :nth-child(3) {
                color: gray;
            }
            :nth-child(4) {
                span {
                    font-size: 16px;
                    color: orange;
                }
                s {
                    color: gray;
                }
            }
        }
    }
}
</style>
